<template>
  <div
    id="threepage"
    ref="threepage"
    @mousedown.prevent="mouDown"
    @mouseup="mouUp"
  >
    <ul class="book" ref="book">
      <!-- 书架拼装 -->
      <template>
        <li class="book1"></li>
        <li class="book2"></li>
        <li class="book3"></li>
        <li class="book4"></li>
        <li class="book5"></li>
        <li class="book6"></li>
        <li class="book7"></li>
        <li class="book8"></li>
        <li class="book9"></li>
        <li class="book10"></li>
        <li class="book11"></li>
        <li class="book12"></li>
        <li class="book13"></li>
        <li class="book14"></li>
        <li class="book15"></li>
        <li class="book16"></li>
        <li class="book17"></li>
        <li class="book18"></li>
        <li class="book19"></li>
        <li class="book20"></li>
        <li class="book21"></li>
        <li class="book22"></li>
        <li class="book23"></li>
        <li class="book24"></li>
        <li class="book25"></li>
        <li class="book26"></li>
        <li class="book27"></li>
        <li class="book28"></li>
        <li class="book29"></li>
        <li class="book30"></li>
        <li class="book31"></li>
        <li class="book32"></li>
        <li class="book33"></li>
        <li class="book34"></li>
        <li class="book35"></li>
        <li class="book36"></li>
        <li class="book37"></li>
        <li class="book38"></li>
        <li class="book39"></li>
        <li class="book40"></li>
        <li class="book41"></li>
        <li class="book42"></li>
        <li class="book43"></li>
        <li class="book44"></li>
        <li class="book45"></li>
        <li class="book46"></li>
        <li class="book47"></li>
        <li class="book48"></li>
        <li class="book49"></li>
        <li class="book50"></li>
        <li class="book51"></li>
        <li class="book52"></li>
        <li class="book53"></li>
        <li class="book54"></li>
      </template>

      <!-- 书架物品区 -->
      <template>
        <li class="books1">
          <div class="ce1">白皮书</div>
          <div class="zheng1"></div>
          <div class="fan1"></div>
        </li>
        <li class="books2">
          <div class="ce2">白皮书</div>
          <div class="zheng2"></div>
          <div class="fan2"></div>
        </li>
        <li class="books3">
          <div class="ce3">白皮书</div>
          <div class="zheng3"></div>
          <div class="fan3"></div>
        </li>
        <li
          class="books4"
          @click="
            winOpen(
              'https://www.bilibili.com/read/cv5650633?spm_id_from=333.999.0.0'
            )
          "
        >
          <div class="ce4">尚硅谷前端路线</div>
          <div class="zheng4"></div>
          <div class="fan4"></div>
        </li>
        <li
          class="books5"
          @click="winOpen('https://www.bilibili.com/read/cv14055438')"
        >
          <div class="ce5">千锋前端路线</div>
          <div class="zheng5"></div>
          <div class="fan5"></div>
        </li>
        <li
          class="books6"
          @click="
            winOpen(
              'https://www.bilibili.com/video/BV1z3411i7Zu?share_source=copy_web'
            )
          "
        >
          <div class="ce6">编程思维引导</div>
          <div class="zheng6"><br />编程思维引导</div>
          <div class="fan6"></div>
        </li>
        <li class="books7">
          <div class="ce7">视频专区</div>
          <div class="zheng7"></div>
          <div class="fan7"></div>
        </li>
        <li
          class="books8"
          @click="winOpen('https://mp.weixin.qq.com/s/QIaEeJHhk6l5u5x3PryBcg')"
        >
          <div class="ce8">IT生高频讨论</div>
          <div class="zheng8"></div>
          <div class="fan8"></div>
        </li>
        <li class="books9">
          <div class="ce9">up主推荐</div>
          <div class="zheng9"><br />up主推荐</div>
          <div class="fan9"></div>
        </li>
        <li
          class="books10"
          @click="
            winOpen(
              'https://juejin.cn/post/6905294475539513352?share_token=1b7498ac-c2dd-4e45-8be0-727ed42dff5f'
            )
          "
        >
          <div class="ce10">掘金前端八股</div>
          <div class="zheng10"><br /></div>
          <div class="fan10"></div>
        </li>
        <li class="books11">
          <div class="ce11">文章一</div>
          <div class="zheng11"></div>
          <div class="fan11"></div>
        </li>
        <li class="books12">
          <div class="ce12">文章二</div>
          <div class="zheng12"><br />文章二</div>
          <div class="fan12"></div>
        </li>
        <li class="books13">
          <div class="ce13">文本专区</div>
          <div class="zheng13"></div>
          <div class="fan13"></div>
        </li>
        <li class="titl">IT'S A WORLD</li>
        <li class="books14" @click="winOpen('http://1.15.238.202/sph/')">
          <div class="ce14">尚品汇</div>
          <div class="zheng14"></div>
          <div class="fan14"></div>
        </li>
        <li class="books15">
          <div class="ce15">一页</div>
          <div class="zheng15"></div>
          <div class="fan15"></div>
        </li>
        <li class="books16">
          <div class="ce16">数媒印象</div>
          <div class="zheng16"></div>
          <div class="fan16"></div>
        </li>
        <li class="books17">
          <div class="ce17">待定</div>
          <div class="zheng17"></div>
          <div class="fan17"></div>
        </li>
        <li class="books18">
          <div class="ce18">待定</div>
          <div class="zheng18"><br />待定</div>
          <div class="fan18"></div>
        </li>
        <li class="books19">
          <div class="ce19">项目专区</div>
          <div class="zheng19"></div>
          <div class="fan19"></div>
        </li>
        <!-- 中间盒子 -->
        <li class="sbox">
          <div class="topt"></div>
          <div class="topf"></div>
          <div class="topb"></div>
          <div class="topl"></div>
          <div class="topr"></div>
          <div class="boxf">WEB</div>
          <div class="boxb"></div>
          <div class="boxl"></div>
          <div class="boxr"></div>
          <div class="boxx"></div>
        </li>
        <li class="books20" @click="winOpen('/download/Pictures.zip')">
          <div class="ce20">一点问题图集</div>
          <div class="zheng20"></div>
          <div class="fan20"></div>
        </li>
        <li class="books21" @click="winOpen('/download/Record.zip')">
          <div class="ce21">一些凌乱笔记</div>
          <div class="zheng21"></div>
          <div class="fan21"></div>
        </li>
        <li class="books22">
          <div class="ce22">下载专区</div>
          <div class="zheng22"></div>
          <div class="fan22"></div>
        </li>
        <li class="books23">
          <div class="ce23">哑舍零</div>
          <div class="zheng23"></div>
          <div class="fan23"></div>
        </li>
        <li class="books24">
          <div class="ce24">哑舍壹</div>
          <div class="zheng24"></div>
          <div class="fan24"></div>
        </li>
        <li class="books25">
          <div class="ce25">哑舍贰</div>
          <div class="zheng25"></div>
          <div class="fan25"></div>
        </li>
        <li class="books26">
          <div class="ce26">哑舍叁</div>
          <div class="zheng26"></div>
          <div class="fan26"></div>
        </li>
        <li class="books27">
          <div class="ce27">哑舍肆</div>
          <div class="zheng27"></div>
          <div class="fan27"></div>
        </li>
        <li class="books28">
          <div class="ce28">哑舍伍</div>
          <div class="zheng28"></div>
          <div class="fan28"></div>
        </li>
        <li class="books29">
          <div class="ce29">哑舍陆</div>
          <div class="zheng29"></div>
          <div class="fan29"></div>
        </li>
        <li class="books30">
          <div class="ce30">闲置区</div>
          <div class="zheng30"></div>
          <div class="fan30"></div>
        </li>
        <li class="just">
          可左右拖动旋转视角<br />萌新起步<br />前方施工中哦~
        </li>
      </template>

      <!-- 右邮箱弹出界面 -->
      <li class="messtext">
        <p class="ptext">
          HELLO 欢迎光临<br /><br />
          这是一个书架<br />
          也是未来一个小屋的一角<br />
          或者<br />
          一个世界的一角<br />
          也说不定哦
        </p>
      </li>

      <!-- 邮箱拼装 -->
      <li class="message">
        <div class="messf">
          <div class="messf1">
            <div class="messf2"></div>
          </div>
        </div>
        <div class="messb"></div>
        <div class="messl"></div>
        <div class="messr"></div>
        <div class="messt"></div>
        <div class="messx"></div>
      </li>
      <li class="holdm">
        <div class="holdf"></div>
        <div class="holdb"></div>
        <div class="holdl"></div>
        <div class="holdr"></div>
      </li>

      <!-- 毛玻璃简历 -->
      <li class="glass" ref="glass">
        <div class="frosted"></div>
        <div class="textg">
          <span>个人简介</span>
          <hr style="height: 3px; background-color: aqua" />
          姓名：姜珂童&emsp;&emsp;联系方式：15565908327<br>
          电子邮箱：597770362@qq.com<br>
          籍贯：河南漯河&emsp;出生年月：1999.02.08<br>
          求职意向：前端开发工程师实习
          <br><span>教育经历</span>
          <hr style="height: 3px; background-color: aqua" />
          2018.9 - 预计2022&emsp;许昌学院<br>
          学习专业：数字媒体技术<br>
          主修课程：web前端设计、max三维数字建模、动态网站开发、软件工程、PR和AR视频制作、二维动画设计等<br>
          Web前端设计期末成绩：98 
          <br><span>校园学习经历</span>
          <hr style="height: 3px; background-color: aqua" />
          # 20年进入大三接触web前端产生兴趣，在学期课程开课前提前自学完成老师一学期的教学计划，之后在老师的授课过程中多次与老师讨论教学的计划安排和遇到的问题，为课堂补充课本上缺少的相关知识点<br>
          # 21年初大三第二学期放缓进度继续自学web前端，在学期末的《软件工程》课程期末组队作品中为同学的游戏作品制作web浏览页面后放到云服务器上进行展示并拿到高分，之后的暑假开始自学vue框架<br>
          # 21年秋进入大四在老师的协商下于本专业成立了web前端学习小组并担任组长，通过经验分享组织并引导新一届大三想走web方向的同学进行系统的学习，并带领一部分同学参加蓝桥杯22年首届的web竞赛，当前处于备赛中<br>
          # 22年初基于老师的要求与组员筹备开发展示本专业历届毕设作品的平台项目
          <br><span>技能</span>
          <hr style="height: 3px; background-color: aqua" />
          # 熟练使用HTML+CSS构建页面布局，有独立处理工作问题的能力<br>
          # 熟悉JavaScript语法，能够通过自然语言到编程语言的翻译与转化进行准确的业务逻辑分析<br>
          # 熟悉Vue框架及其开发流程，通过视频自学进行过相关项目开发练习（且正在毕设中基于Vue进行个人从零开始的webapp设计与开发）<br>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyWorld",
  data() {
    return {
      mouseX: 0,
      mouseChangeX: 0,
      rotateDegX: 0,
    };
  },
  methods: {
    winOpen(url) {
      window.open(url);
    },
    mouMove(event) {
      this.mouseChangeX = event.clientX;
      if (this.mouseChangeX > this.mouseX) {
        //向右旋转
        this.rotateDegX += 2;
        if (this.rotateDegX >= 30) {
          this.rotateDegX = 30;
        }
        this.$refs.book.style.transform = "rotateY(" + this.rotateDegX + "deg)";
        this.mouseX = this.mouseChangeX;
        this.mouseChangeX = 0;
      } else if (this.mouseChangeX < this.mouseX) {
        //向左旋转
        this.rotateDegX = this.rotateDegX - 2;
        if (this.rotateDegX <= -30) {
          this.rotateDegX = -30;
        }
        this.$refs.book.style.transform = "rotateY(" + this.rotateDegX + "deg)";
        this.mouseX = this.mouseChangeX;
        this.mouseChangeX = 0;
      } else {
        return false;
      }
    },
    mouDown(event) {
      this.mouseX = event.clientX;
      this.$refs.threepage.addEventListener("mousemove", this.mouMove, false);
    },
    mouUp() {
      this.$refs.threepage.removeEventListener(
        "mousemove",
        this.mouMove,
        false
      );
    },
  },
};
</script>

<style scoped lang="less">
.bookshelf3 {
  position: absolute;
  background-color: rgba(120, 0, 10, 1);
}
.bookshelf5 {
  position: absolute;
  background-color: rgba(120, 60, 20, 1);
}
.bookshelf11 {
  position: absolute;
  background-color: rgba(100, 100, 100, 1);
}
.bookshelf32 {
  position: absolute;
  background-color: rgba(200, 100, 10, 1);
}
.bookshelf42 {
  position: absolute;
  background-color: rgba(210, 90, 10, 1);
}
.bookshelf43 {
  position: absolute;
  background-color: rgba(120, 50, 10, 1);
}
.bookshelf51 {
  position: absolute;
  background-color: rgba(191, 180, 54, 1);
}

#threepage {
  width: 1920px;
  height: 956px;
  transform-style: preserve-3d;
  overflow: hidden;
  .book {
    border-bottom: 3px solid #000000;
    margin-top: 100px;
    width: 1920px;
    height: 700px;
    transform-style: preserve-3d;
    transition: 2s;
    transform: rotateX(-5deg);
    // 地面
    .book1 {
      width: 1920px;
      height: 700px;
      position: absolute;
      background-color: burlywood;
      transform-origin: 50% 100%;
      transform: rotateX(90deg);
    }
    // 书架
    .book2 {
      width: 900px;
      height: 700px;
      position: absolute;
      background-color: rgba(120, 80, 10, 1);
      transform: translate3d(540px, 0, -400px);
    }
    .book3 {
      width: 200px;
      height: 700px;
      .bookshelf3();
      transform: translate3d(440px, 0, -300px) rotateY(90deg);
    }
    .book4 {
      width: 200px;
      height: 700px;
      .bookshelf3();
      transform: translate3d(1340px, 0, -300px) rotateY(-90deg);
    }
    .book5 {
      width: 900px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(540px, -100px, -300px) rotateX(90deg);
    }
    .book6 {
      width: 200px;
      height: 685px;
      .bookshelf3();
      transform: translate3d(455px, 15px, -300px) rotateY(90deg);
    }
    .book7 {
      width: 200px;
      height: 685px;
      .bookshelf3();
      transform: translate3d(1325px, 15px, -300px) rotateY(90deg);
    }
    .book8 {
      width: 870px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(555px, -85px, -300px) rotateX(90deg);
    }
    .book9 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(555px, 125px, -300px) rotateX(90deg);
    }
    .book10 {
      width: 200px;
      height: 210px;
      .bookshelf5();
      transform: translate3d(735px, 15px, -300px) rotateY(90deg);
    }
    .book11 {
      width: 280px;
      height: 200px;
      .bookshelf11();
      transform: translate3d(850px, -5px, -300px) rotateX(90deg);
    }
    .book12 {
      width: 200px;
      height: 80px;
      .bookshelf11();
      transform: translate3d(750px, 15px, -300px) rotateY(90deg);
    }
    .book13 {
      width: 200px;
      height: 80px;
      .bookshelf11();
      transform: translate3d(1030px, 15px, -300px) rotateY(90deg);
    }
    .book14 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(1145px, 50px, -300px) rotateX(90deg);
    }
    .book15 {
      width: 200px;
      height: 135px;
      .bookshelf5();
      transform: translate3d(1045px, 15px, -300px) rotateY(90deg);
    }
    .book16 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(555px, 140px, -300px) rotateX(90deg);
    }
    .book17 {
      width: 200px;
      height: 210px;
      .bookshelf5();
      transform: translate3d(735px, 240px, -300px) rotateY(90deg);
    }
    .book18 {
      width: 280px;
      height: 200px;
      .bookshelf11();
      transform: translate3d(850px, 10px, -300px) rotateX(90deg);
    }
    .book19 {
      width: 280px;
      height: 200px;
      .bookshelf11();
      transform: translate3d(850px, 172.5px, -300px) rotateX(90deg);
    }
    .book20 {
      width: 200px;
      height: 162.5px;
      .bookshelf11();
      transform: translate3d(750px, 110px, -300px) rotateY(90deg);
    }
    .book21 {
      width: 200px;
      height: 162.5px;
      .bookshelf11();
      transform: translate3d(1030px, 110px, -300px) rotateY(90deg);
    }
    .book22 {
      width: 280px;
      height: 200px;
      .bookshelf11();
      transform: translate3d(850px, 187.5px, -300px) rotateX(90deg);
    }
    .book23 {
      width: 200px;
      height: 162.5px;
      .bookshelf11();
      transform: translate3d(750px, 287.5px, -300px) rotateY(90deg);
    }
    .book24 {
      width: 200px;
      height: 162.5px;
      .bookshelf11();
      transform: translate3d(1030px, 287.5px, -300px) rotateY(90deg);
    }
    .book25 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(1145px, 65px, -300px) rotateX(90deg);
    }
    .book26 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(1145px, 200px, -300px) rotateX(90deg);
    }
    .book27 {
      width: 200px;
      height: 135px;
      .bookshelf5();
      transform: translate3d(1045px, 165px, -300px) rotateY(90deg);
    }
    .book28 {
      width: 280px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(1145px, 215px, -300px) rotateX(90deg);
    }
    .book29 {
      width: 200px;
      height: 135px;
      .bookshelf5();
      transform: translate3d(1045px, 315px, -300px) rotateY(90deg);
    }
    .book30 {
      width: 870px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(555px, 350px, -300px) rotateX(90deg);
    }
    .book31 {
      width: 870px;
      height: 200px;
      .bookshelf5();
      transform: translate3d(555px, 365px, -300px) rotateX(90deg);
    }
    .book32 {
      width: 900px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(540px, 0, -200px);
    }
    .book33 {
      width: 15px;
      height: 685px;
      .bookshelf32();
      transform: translate3d(540px, 15px, -200px);
    }
    .book34 {
      width: 15px;
      height: 685px;
      .bookshelf32();
      transform: translate3d(1425px, 15px, -200px);
    }
    .book35 {
      width: 280px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(555px, 225px, -200px);
    }
    .book36 {
      width: 15px;
      height: 435px;
      .bookshelf32();
      transform: translate3d(835px, 15px, -200px);
    }
    .book37 {
      width: 280px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(850px, 95px, -200px);
    }
    .book38 {
      width: 280px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(850px, 272.5px, -200px);
    }
    .book39 {
      width: 15px;
      height: 435px;
      .bookshelf32();
      transform: translate3d(1130px, 15px, -200px);
    }
    .book40 {
      width: 280px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(1145px, 150px, -200px);
    }
    .book41 {
      width: 280px;
      height: 15px;
      .bookshelf32();
      transform: translate3d(1145px, 300px, -200px);
    }
    .book42 {
      width: 870px;
      height: 15px;
      .bookshelf42();
      transform: translate3d(555px, 450px, -200px);
    }
    .book43 {
      width: 210px;
      height: 210px;
      .bookshelf43();
      transform: translate3d(555px, 465px, -200px);
    }
    .book44 {
      width: 210px;
      height: 210px;
      .bookshelf43();
      transform: translate3d(775px, 465px, -200px);
    }
    .book45 {
      width: 210px;
      height: 210px;
      .bookshelf43();
      transform: translate3d(995px, 465px, -200px);
    }
    .book46 {
      width: 210px;
      height: 210px;
      .bookshelf43();
      transform: translate3d(1215px, 465px, -200px);
    }
    .book47 {
      width: 10px;
      height: 210px;
      .bookshelf42();
      transform: translate3d(765px, 465px, -200px);
    }
    .book48 {
      width: 10px;
      height: 210px;
      .bookshelf42();
      transform: translate3d(985px, 465px, -200px);
    }
    .book49 {
      width: 10px;
      height: 210px;
      .bookshelf42();
      transform: translate3d(1205px, 465px, -200px);
    }
    .book50 {
      width: 870px;
      height: 25px;
      .bookshelf42();
      transform: translate3d(555px, 675px, -200px);
    }
    .book51 {
      width: 8px;
      height: 24px;
      .bookshelf51();
      transform: translate3d(747px, 558px, -199px);
    }
    .book52 {
      width: 8px;
      height: 24px;
      .bookshelf51();
      transform: translate3d(785px, 558px, -199px);
    }
    .book53 {
      width: 8px;
      height: 24px;
      .bookshelf51();
      transform: translate3d(1187px, 558px, -199px);
    }
    .book54 {
      width: 8px;
      height: 24px;
      .bookshelf51();
      transform: translate3d(1225px, 558px, -199px);
    }

    // 书籍
    .books1 {
      width: 20px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(556px, 75px, -260px);
      transform-style: preserve-3d;
      font-size: 16px;
      font-weight: bold;
      .ce1 {
        width: 20px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        text-align: center;
      }
      .zheng1 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -70px) rotateY(90deg);
      }
      .fan1 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
    }

    .books2 {
      width: 20px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(578px, 75px, -260px);
      transform-style: preserve-3d;
      font-size: 16px;
      font-weight: bold;
      .ce2 {
        width: 20px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        text-align: center;
      }
      .zheng2 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -70px) rotateY(90deg);
      }
      .fan2 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
    }

    .books3 {
      width: 20px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(600px, 75px, -260px);
      transform-style: preserve-3d;
      font-size: 16px;
      font-weight: bold;
      .ce3 {
        width: 20px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        text-align: center;
      }
      .zheng3 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -70px) rotateY(90deg);
      }
      .fan3 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
    }

    .books4 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(622px, 75px, -260px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      .ce4 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng4 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-40px, 0, -70px) rotateY(90deg);
      }
      .fan4 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
      &:hover .ce4 {
        background-color: paleturquoise;
      }
    }

    .books5 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(654px, 75px, -260px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      .ce5 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng5 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-40px, 0, -70px) rotateY(90deg);
      }
      .fan5 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
      &:hover .ce5 {
        background-color: paleturquoise;
      }
    }

    .books6 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(686px, 75px, -260px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      .ce6 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng6 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-40px, 0, -70px) rotateY(90deg);
      }
      .fan6 {
        width: 140px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-70px, 0, -70px) rotateY(90deg);
      }
      &:hover .ce6 {
        background-color: paleturquoise;
      }
    }

    .books7 {
      width: 25px;
      height: 190px;
      border: 1px solid black;
      position: absolute;
      transform-style: preserve-3d;
      transform-origin: left bottom;
      transform: translate3d(802px, 35px, -280px) rotateZ(-29.5deg);
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      .ce7 {
        width: 25px;
        height: 190px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
      }
      .zheng7 {
        width: 120px;
        height: 190px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-35px, 0, -60px) rotateY(90deg);
      }
      .fan7 {
        width: 120px;
        height: 190px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-60px, 0, -60px) rotateY(90deg);
      }
    }
    /*左上书*/

    .books8 {
      width: 60px;
      height: 190px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(555px, 260px, -280px);
      transform-style: preserve-3d;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      .ce8 {
        width: 60px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng8 {
        width: 120px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(0, 0, -60px) rotateY(90deg);
      }
      .fan8 {
        width: 120px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-60px, 0, -60px) rotateY(90deg);
      }
      &:hover .ce8 {
        background-color: paleturquoise;
      }
    }

    .books9 {
      width: 60px;
      height: 190px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(617px, 260px, -280px);
      transform-style: preserve-3d;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      .ce9 {
        width: 60px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng9 {
        width: 120px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(0, 0, -60px) rotateY(90deg);
      }
      .fan9 {
        width: 120px;
        height: 190px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-60px, 0, -60px) rotateY(90deg);
      }
      &:hover .ce9 {
        background-color: paleturquoise;
      }
    }

    .books10 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(679px, 300px, -300px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      .ce10 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng10 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-20px, 0, -50px) rotateY(90deg);
      }
      .fan10 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
      &:hover .ce10 {
        background-color: paleturquoise;
      }
    }

    .books11 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(711px, 300px, -300px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      .ce11 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng11 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-20px, 0, -50px) rotateY(90deg);
      }
      .fan11 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books12 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(743px, 300px, -300px);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      .ce12 {
        width: 30px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng12 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-20px, 0, -50px) rotateY(90deg);
      }
      .fan12 {
        width: 100px;
        height: 150px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books13 {
      width: 30px;
      height: 150px;
      border: 1px solid black;
      position: absolute;
      transform-origin: right bottom;
      transform: translate3d(780px, 300px, -300px) rotateZ(5deg);
      transform-style: preserve-3d;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      .ce13 {
        width: 30px;
        height: 150px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
      }
      .zheng13 {
        width: 100px;
        height: 150px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-20px, 0, -50px) rotateY(90deg);
      }
      .fan13 {
        width: 100px;
        height: 150px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }
    /*左下书*/

    .titl {
      width: 240px;
      height: 80px;
      position: absolute;
      background-color: navajowhite;
      border: 2px solid black;
      transform-origin: 50% 100%;
      transform: translate3d(868px, 15px, -210px) rotateX(20deg);
      font-size: 30px;
      text-align: center;
      line-height: 80px;
    }
    /*中上牌子*/

    .books14 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(850px, 152.5px, -300px);
      transform-style: preserve-3d;
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      .ce14 {
        width: 43px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
      }
      .zheng14 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan14 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
      &:hover .ce14 {
        background-color: paleturquoise;
      }
    }

    .books15 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(895px, 152.5px, -300px);
      transform-style: preserve-3d;
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      .ce15 {
        width: 43px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
      }
      .zheng15 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan15 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books16 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(940px, 152.5px, -300px);
      transform-style: preserve-3d;
      letter-spacing: 6px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      .ce16 {
        width: 43px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
      }
      .zheng16 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan16 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books17 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(985px, 152.5px, -300px);
      transform-style: preserve-3d;
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
      font-weight: bold;
      .ce17 {
        width: 43px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
      }
      .zheng17 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan17 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books18 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1030px, 152.5px, -300px);
      transform-style: preserve-3d;
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
      font-weight: bold;
      .ce18 {
        width: 43px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
      }
      .zheng18 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan18 {
        width: 100px;
        height: 120px;
        background-color: rgba(200, 185, 162, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }

    .books19 {
      width: 43px;
      height: 120px;
      border: 1px solid black;
      position: absolute;
      transform-origin: right bottom;
      transform: translate3d(1080px, 152.5px, -300px) rotateZ(2deg);
      transform-style: preserve-3d;
      font-size: 18px;
      letter-spacing: 6px;
      text-align: center;
      font-weight: bold;
      .ce19 {
        width: 43px;
        height: 120px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
      }
      .zheng19 {
        width: 100px;
        height: 120px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-7px, 0, -50px) rotateY(90deg);
      }
      .fan19 {
        width: 100px;
        height: 120px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-50px, 0, -50px) rotateY(90deg);
      }
    }
    /*中中书*/

    .sbox {
      width: 200px;
      height: 100px;
      position: absolute;
      transform: translate3d(890px, 350px, -280px);
      transform-style: preserve-3d;
      cursor: pointer;
      font-size: 30px;
      text-align: center;
      .topt {
        position: absolute;
        width: 200px;
        height: 120px;
        background-color: slateblue;
        transform: translate3d(0, -60px, -60px) rotateX(90deg);
      }
      .topf {
        position: absolute;
        width: 200px;
        height: 20px;
        background-color: slateblue;
        border: 1px solid black;
      }
      .topb {
        position: absolute;
        width: 200px;
        height: 20px;
        background-color: slateblue;
        border: 1px solid black;
        transform: translateZ(-120px);
      }
      .topl {
        position: absolute;
        width: 120px;
        height: 20px;
        background-color: slateblue;
        border: 1px solid black;
        transform: translate3d(-60px, 0, -60px) rotateY(90deg);
      }
      .topr {
        position: absolute;
        width: 120px;
        height: 20px;
        background-color: slateblue;
        border: 1px solid black;
        transform: translate3d(140px, 0, -60px) rotateY(90deg);
      }
      .boxf {
        position: absolute;
        width: 200px;
        height: 80px;
        border: 1px solid black;
        background-color: slateblue;
        transform: translate3d(0, 20px, 0);
      }
      .boxb {
        position: absolute;
        width: 200px;
        height: 80px;
        background-color: slateblue;
        border: 1px solid black;
        transform: translate3d(0, 20px, -120px);
      }
      .boxl {
        position: absolute;
        width: 120px;
        height: 80px;
        background-color: slateblue;
        transform: translate3d(-60px, 20px, -60px) rotateY(90deg);
      }
      .boxr {
        position: absolute;
        width: 120px;
        height: 80px;
        background-color: slateblue;
        transform: translate3d(140px, 20px, -60px) rotateY(90deg);
      }
      .boxx {
        position: absolute;
        width: 200px;
        height: 120px;
        background-color: slateblue;
        transform: translate3d(0, 40px, -60px) rotateX(90deg);
      }
    }
    /*中下盒子*/

    .books20 {
      width: 90px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1335px, 40px, -250px);
      transform-style: preserve-3d;
      font-size: 25px;
      letter-spacing: 6px;
      text-align: center;
      cursor: pointer;
      .ce20 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng20 {
        width: 150px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(15px, 0, -75px) rotateY(90deg);
      }
      .fan20 {
        width: 150px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-75px, 0, -75px) rotateY(90deg);
      }
      &:hover .ce20 {
        background-color: paleturquoise;
      }
    }

    .books21 {
      width: 90px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1245px, 40px, -250px);
      transform-style: preserve-3d;
      font-size: 25px;
      letter-spacing: 6px;
      text-align: center;
      cursor: pointer;
      .ce21 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
      }
      .zheng21 {
        width: 150px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(15px, 0, -75px) rotateY(90deg);
      }
      .fan21 {
        width: 150px;
        height: 110px;
        background-color: rgba(200, 200, 200, 1);
        position: absolute;
        transform: translate3d(-75px, 0, -75px) rotateY(90deg);
      }
      &:hover .ce21 {
        background-color: paleturquoise;
      }
    }

    .books22 {
      width: 25px;
      height: 130px;
      border: 1px solid black;
      position: absolute;
      transform-style: preserve-3d;
      transform-origin: right bottom;
      transform: translate3d(1180px, 20px, -280px) rotateZ(19deg);
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      .ce22 {
        width: 25px;
        height: 130px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
      }
      .zheng22 {
        width: 120px;
        height: 130px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-35px, 0, -60px) rotateY(90deg);
      }
      .fan22 {
        width: 120px;
        height: 130px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-60px, 0, -60px) rotateY(90deg);
      }
    }
    /*右上书*/

    .books23 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1145px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce23 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng23 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan23 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books24 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1179px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce24 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng24 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan24 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books25 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1213px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce25 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng25 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan25 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books26 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1247px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce26 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng26 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan26 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books27 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1281px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce27 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng27 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan27 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books28 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1315px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce28 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng28 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan28 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books29 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1349px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce29 {
        width: 34px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
      }
      .zheng29 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan29 {
        width: 90px;
        height: 110px;
        background-color: rgba(200, 193, 155, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }

    .books30 {
      width: 34px;
      height: 110px;
      border: 1px solid black;
      position: absolute;
      transform: translate3d(1390px, 190px, -310px);
      transform-style: preserve-3d;
      font-size: 20px;
      text-align: center;
      .ce30 {
        width: 34px;
        height: 110px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
      }
      .zheng30 {
        width: 90px;
        height: 110px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-11px, 0, -45px) rotateY(90deg);
      }
      .fan30 {
        width: 90px;
        height: 110px;
        background-color: rgba(50, 100, 200, 1);
        position: absolute;
        transform: translate3d(-45px, 0, -45px) rotateY(90deg);
      }
    }
    /*右中*/

    .just {
      width: 240px;
      height: 130px;
      position: absolute;
      background-color: rgba(200, 172, 122, 1);
      border: 2px solid black;
      transform-origin: 50% 100%;
      transform: translate3d(1165px, 320px, -280px) rotateX(20deg);
      font-size: 20px;
      font-family: "楷体";
      text-align: center;
      letter-spacing: 5px;
      line-height: 40px;
      font-weight: bold;
    }
    /*右下告示牌*/

    .messtext {
      position: absolute;
      padding: 10px;
      width: 220px;
      height: 150px;
      border: 1px dashed #000000;
      border-radius: 10px;
      background-color: rgba(189, 241, 245, 0.212);
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: skyblue;
      transform: translate3d(1500px, 280px, -140px);
      transform-origin: 50% 50%;
      animation: textshow 1s ease-in-out both;
      cursor: pointer;
    }
    @keyframes textshow {
      0% {
        transform: translate3d(1500px, 280px, -140px) scale(0, 0);
      }
      30% {
        transform: translate3d(1500px, 280px, -140px) scale(0.1, 1);
      }
      100% {
        transform: translate3d(1500px, 280px, -140px) scale(1, 1);
      }
    }
    /*邮件通知*/

    .message {
      width: 150px;
      height: 180px;
      position: absolute;
      transform: translate3d(1540px, 470px, -100px);
      transform-style: preserve-3d;
      text-align: center;
      .messf {
        width: 150px;
        height: 180px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        .messf1 {
          width: 110px;
          height: 20px;
          margin: 25px auto;
          border: 3px solid #000000;
          background-color: yellow;
          .messf2 {
            width: 90px;
            height: 10px;
            margin: 2px auto;
            border: 3px solid #000000;
            background-color: #00008b;
          }
        }
      }
      .messb {
        width: 150px;
        height: 180px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        transform: translateZ(-80px);
      }
      .messl {
        width: 80px;
        height: 180px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        transform: translate3d(-40px, 0, -40px) rotateY(90deg);
      }
      .messr {
        width: 80px;
        height: 180px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        transform: translate3d(110px, 0, -40px) rotateY(90deg);
      }
      .messt {
        width: 150px;
        height: 80px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        transform: translate3d(0, -40px, -40px) rotateX(90deg);
      }
      .messx {
        width: 150px;
        height: 80px;
        border: 1px solid #000000;
        position: absolute;
        background-color: rgba(200, 50, 50, 1);
        transform: translate3d(0, 140px, -40px) rotateX(90deg);
      }
    }
    /*信箱*/

    .holdm {
      width: 25px;
      height: 50px;
      position: absolute;
      transform-style: preserve-3d;
      transform: translate3d(1602px, 650px, -135px);
    }
    .holdf {
      width: 25px;
      height: 50px;
      .bookshelf32();
      border: 1px solid #000000;
    }
    .holdb {
      width: 25px;
      height: 50px;
      .bookshelf32();
      border: 1px solid #000000;
      transform: translateZ(-25px);
    }
    .holdl {
      width: 25px;
      height: 50px;
      .bookshelf32();
      border: 1px solid #000000;
      transform: translate3d(-12.5px, 0, -12.5px) rotateY(90deg);
    }
    .holdr {
      width: 25px;
      height: 50px;
      .bookshelf32();
      border: 1px solid #000000;
      transform: translate3d(12.5px, 0, -12.5px) rotateY(90deg);
    }
    /*支柱*/
    .glass {
      width: 470px;
      height: 720px;
      position: absolute;
      // transform-style: preserve-3d;
      transform: translate3d(50px, -50px, -240px);
      animation: glassshow 0.5s ease-in-out both;
      // background-color: aqua;
      .frosted {
        width: 470px;
        height: 720px;
        background-image: url(./images/BG2.png);
        background-attachment: fixed;
        position: absolute;
        z-index: -1;
        filter: blur(5px);
        opacity: 0.8;
      }
      .textg {
        width: 450px;
        height: 640px;
        margin: 10px;
        color: antiquewhite;
        font-size: 16px;
        text-align: left;
        span {
          font-size: 20px;
          font-weight: bold;
        }
      }
      @keyframes glassshow {
        from{transform: translate3d(50px, -50px, -240px) scale(1,0);}
        to{transform: translate3d(50px, -50px, -240px) scale(1,1);}
      }
    }
  }
}
</style>
